<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-04-10 09:12:58
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-10-10 10:16:53
 * @FilePath: \vue3-progect\src\components\BaseSearch\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 公共搜索区域 -->
<template>
	<div ref="searchEl">
		{{ search }}
		<el-row :gutter="20">
			<!-- 搜索框 -->
			<el-col
				v-for="config in searchConfig"
				:key="config.prop"
				:xs="24"
				:sm="12"
				:md="config.span || 4"
			>
				<FormType :config="config" v-model:form="search" />
			</el-col>
			<el-col :xs="24" :sm="12" :md="4">
				<el-button @click="searchClick" type="primary">查询</el-button>
				<el-button @click="resetClick" type="primary">重置</el-button>
			</el-col>
			<!-- 按钮 -->
			<el-col
				:span="btn.span"
				v-for="btn in searchBtnConfig"
				:key="btn.prop"
			></el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watchEffect } from "vue";
const props = defineProps({
	searchConfig: { type: Array, default: () => [] }, //搜索配置
	searchBtnConfig: { type: Array, default: () => [] } //搜索按钮配置
});
const emits = defineEmits(["searchClick", "resetClick"]);

//搜索属性
const search = ref({});

//查询
const searchClick = () => {
	console.log("searchClick,searchClick");
	emits("searchClick", search);
};
//重置
const resetClick = () => {
	props.searchConfig.forEach((item) => {
		search.value[item.prop] = item.default || "";
	});
	emits("resetClick", search);
};
//搜索属性
watchEffect(() => {
	//初始化数据
	resetClick();
});

const searchEl = ref();
defineExpose({ searchEl });
</script>

<style lang="less" scoped>
:deep(.el-col) {
	padding-bottom: 10px;
}
</style>
